<template>
    <!-- 应用更新信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="70px" label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="创建日期" label-width="70px">
                            <el-date-picker v-model="searchFormData.createTimeRange" type="daterange"
                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="YYYY-MM-DD" @change="loadDataList"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :style="{ paddingLeft: '40px' }">
                        <el-button type="success" @click="loadDataList">查询</el-button>
                    </el-col>
                    <el-col :span="1" :style="{ paddingLeft: '40px' }">
                        <el-button type="primary" @click="showEdit">发布版本</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotUpdateDesc="{ row }">
                <div v-for="(item, index) in row.descriptionList" :key="index">
                    [{{ index + 1 }}] {{ item }}
                </div>
            </template>
            <template #methodTypeSlot="{ row }">
                <div v-if="row.methodType == 0 || row.methodType == 'FILE'">本地文件</div>
                <div v-if="row.methodType == 1 || row.methodType == 'OUTER_LINK'">{{ row.outerLink }}</div>
            </template>
            <template #slotStatus="{ row }">
                <div style="color:#f56c6c" v-if="row.status == 0 || row.status == 'UNPUBLISHED'">未发布</div>
                <div style="color:#f7ba2a" v-if="row.status == 1 || row.status == 'GRAYSCALE_RELEASE'">灰度发布</div>
                <div style="color:#529b2e" v-if="row.status == 2 || row.status == 'FULL_RELEASE'">全网发布</div>
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click">
                    <span class="iconfont icon-gengduo1"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="updateRelease(row)">发布设置</el-dropdown-item>
                        <el-dropdown-item @click="showEdit(row)"
                            v-if="row.status == 0 || row.status == 'UNPUBLISHED'">修改更新</el-dropdown-item>
                        <el-dropdown-item @click="del(row)"
                            v-if="row.status == 0 || row.status == 'UNPUBLISHED'">删除更新</el-dropdown-item>
                    </template>
                </el-dropdown>
            </template>
        </Table>
    </el-card>
    <UpdateEdit ref="updateEditRef" @reload="loadDataList"></UpdateEdit>
    <UpdateRelease ref="updateReleaseRef" @reload="loadDataList"></UpdateRelease>
</template>

<script setup>
import UpdateEdit from "./UpdateEdit.vue";
import UpdateRelease from "./UpdateRelease.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const tableData = ref({})
const tableOptions = {}
const searchForm = ref({})
const searchFormData = ref({})

const columns = [
    {
        label: '版本',
        prop: 'version',
        width: 100
    },
    {
        label: '更新内容',
        prop: 'updateDesc',
        scopedSlots: 'slotUpdateDesc',
        width: 250
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '发布时间',
        prop: 'releaseTime',
    },
    {
        label: '下载方式',
        prop: 'methodType',
        scopedSlots: 'methodTypeSlot',
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus',
    },
    {
        label: '操作',
        prop: 'operation',
        scopedSlots: 'slotOperation',
        width: 100
    },
]

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    if (searchFormData.value.createTimeRange) {
        params.startTime = searchFormData.value.createTimeRange[0]
        params.endTime = searchFormData.value.createTimeRange[1]
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.loadUpdate,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
}

const updateEditRef = ref(null)
const showEdit = (row) => {
    updateEditRef.value.show(Object.assign({}, row))
}

const updateReleaseRef = ref(null)
const updateRelease = (row) => {
    updateReleaseRef.value.show(Object.assign({}, row))
}

const del = async (data) => {
    proxy.Confirm({
        message: `确定要删除应用版本【${data.version}】吗？`,
        okFun: async () => {
            let result = await proxy.Request({
                method: "delete",
                url: proxy.Api.delUpdate,
                params: {
                    id: data.id
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success("删除成功")
            loadDataList()
        }
    })
}
</script>

<style lang="scss" scoped></style>
